<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>完美电商</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath }/static/vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link href="${pageContext.request.contextPath }/static/vendors/font-awesome/css/font-awesome.min.css"
          rel="stylesheet">
    <!-- NProgress -->
    <link href="${pageContext.request.contextPath }/static/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="${pageContext.request.contextPath }/static/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- bootstrap-progressbar -->
    <link href="${pageContext.request.contextPath }/static/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
          rel="stylesheet">
    <!-- JQVMap -->
    <link href="${pageContext.request.contextPath }/static/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>

    <!-- Custom Theme Style -->
    <link href="${pageContext.request.contextPath }/static/build/css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <%@include file="/WEB-INF/jsps/menu.jsp" %>
        <!-- top navigation -->
        <%@include file="/WEB-INF/jsps/top.jsp" %>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>用户列表
                        <small>用户列表详情</small>
                    </h3>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                        <div class="input-group">
                            <input id="query" type="text" class="form-control" placeholder="搜索..."
                                   value="${requestScope.likeValue}">
                            <span class="input-group-btn">
                      <button id="likeValueButton" class="btn btn-default" type="button">查询</button>
                    </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <%--添加主体内容--%>
                    <div class="x_panel">
                        <div class="x_content">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>用户名</th>
                                    <th>角色</th>
                                    <th>邮箱</th>
                                    <th>手机</th>
                                    <th>创建时间</th>
                                    <th>修改时间</th>
                                    <th>真实姓名</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${pageInfo.list }" var="user" varStatus="counts">
                                    <tr>
                                        <span id="userId" style="display: none">${user.uid}</span>
                                        <th scope="row">${counts.count}</th>
                                        <td scope="row">${user.username}</td>
                                        <td>${user.roleName}</td>
                                        <td>${user.email}</td>
                                        <td>${user.tel}</td>
                                        <td>${user.addTime}</td>
                                        <td>${user.updateTime}</td>
                                        <td>${user.relName}</td>
                                        <td>
                                            <button onclick="return get_editInfo(${user.uid});" id="edit_Btn"
                                                    class="btn btn-info btn-xs" data-toggle="modal"
                                                    data-target="#addUserModal"><i
                                                    class="fa fa-pencil"></i>
                                                编辑
                                            </button>
                                            <button onclick="return isDelete(${user.uid},${pageInfo.pageNum});"
                                                    id="delete" class="btn btn-danger btn-xs"><i
                                                    class="fa fa-trash-o"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">

                                    <li>
                                        <c:choose>
                                            <c:when test="${pageInfo.hasPreviousPage}">
                                                <a href="${pageContext.request.contextPath }/user/listUser.do?pageNum=${pageInfo.pageNum-1}&likeValue=${requestScope.likeValue}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="${pageContext.request.contextPath }/user/listUser.do?pageNum=1&likeValue=${requestScope.likeValue}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </c:otherwise>
                                        </c:choose>
                                    </li>
                                    <c:forEach items="${pageInfo.navigatepageNums }" var="nums">
                                        <li <c:if test="${pageInfo.pageNum==nums }">class="active"</c:if>>
                                            <a href="${pageContext.request.contextPath }/user/listUser.do?pageNum=${nums }&likeValue=${requestScope.likeValue}">${nums }</a>
                                        </li>
                                    </c:forEach>
                                    <li>
                                        <c:choose>
                                            <c:when test="${pageInfo.hasNextPage }">

                                                <a href="${pageContext.request.contextPath }/user/listUser.do?pageNum=${pageInfo.pageNum+1}&likeValue=${requestScope.likeValue}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="${pageContext.request.contextPath }/user/listUser.do?pageNum=${pageInfo.pages}&likeValue=${requestScope.likeValue}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </c:otherwise>
                                        </c:choose>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <!-- 模态框示例（Modal） -->
            <form method="post" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
                <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    用户信息
                                </h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label for="username" class="col-sm-3 control-label">用户名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="username" name="username"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="roleName" class="col-sm-3 control-label">角色</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="roleName" value=""
                                                   id="roleName">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="username" class="col-sm-3 control-label">密码：</label>
                                        <input type="hidden" name="password" id="password" >
                                        <div class="col-sm-9">
                                            ***********
                                            <input type="button" id="re_setPwd"
                                                   class="btn btn-info btn-xs" value="重置" onclick="isClick()"/>
                                            <span id="re_tip"> </span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="col-sm-3 control-label">邮箱</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="email" name="email"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="tel" class="col-sm-3 control-label">手机号</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="tel" value="" id="tel"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="relName" class="col-sm-3 control-label">真实姓名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="relName" value=""
                                                   id="relName"
                                                   placeholder="真实姓名">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="submit">
                                    提交
                                </button>
                                <span id="tip"> </span>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </form>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <%@include file="/WEB-INF/jsps/footer.jsp" %>
        <!-- /footer content -->
    </div>
</div>

<!-- jQuery -->
<script src="${pageContext.request.contextPath }/static/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath }/static/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="${pageContext.request.contextPath }/static/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="${pageContext.request.contextPath }/static/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<!-- bootstrap-progressbar -->
<script src="${pageContext.request.contextPath }/static/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="${pageContext.request.contextPath }/static/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="${pageContext.request.contextPath }/static/vendors/skycons/skycons.js"></script>
<!-- Custom Theme Scripts -->
<script src="${pageContext.request.contextPath }/static/build/js/custom.min.js"></script>


<script>
    //模糊查询
    $(function () {
        $("#likeValueButton").click(function () {
            var likeValue = $("#query").val();
            likeValue = $.trim(likeValue);
            likeValue = likeValue.replace(/[\\\+\&\;\"\%]/g, "");
            window.location.href = "/user/listUser.do?likeValue=" + likeValue;
        });
    });

    //删除
    function isDelete(uid, pageNum) {
        if (confirm("确定删除吗？")) {
            var data = {uid: uid};
            var likeValue = $("#query").val();
            var size = ${pageInfo.size};
            var islast = ${pageInfo.isLastPage};
            likeValue = likeValue.replace(/[\\\+\&\;\"\%]/g, "");
            $.ajax({
                url: "/user/deleteUser.do",
                data: data,
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 1) {
                        if (size == 1 && islast == true) {
                            pageNum = pageNum - 1;
                        }
                        window.location.href = "${pageContext.request.contextPath}/user/listUser.do?likeValue=" + likeValue + "&pageNum=" + pageNum;
                    } else {
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert("系统异常请重试");
                }
            });
        }
        return false;
    }

    //点击编辑跳出隐藏域。
    function get_editInfo(uid) {
        data = {uid: uid};
        $.ajax({
            url: "/user/get_editInfo.json",
            data: data,
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                $("#username").val(data.username);
                $("#roleName").val(data.roleName);
                $("#email").val(data.email);
                $("#tel").val(data.tel);
                $("#relName").val(data.relName);
                $("#re_tip").empty();
                $("#username").attr("readonly", "readonly");
                $("#roleName").attr("readonly", "readonly");
            },
            error: function () {
                alert("请求出错！");
            }
        });
    };

    //修改的信息
    $(function () {
        $("#submit").click(function () {
            var pageNum = ${pageInfo.pageNum};
            var likeValue = $("#query").val();
            likeValue = likeValue.replace(/[\\\+\&\;\"\%]/g, "");
            $.ajax({
                url: "/user/editInfo.json",
                data: $("#form_data").serialize(),
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    if (data.code == 1) {
                        alert("更新成功！");
                        if (data.code == 1) {
                            window.location.href = "${pageContext.request.contextPath}/user/listUser.do?likeValue=" + likeValue + "&pageNum=" + pageNum;
                        } else {
                            alert(data.msg);
                        }
                    } else {
                        $("#tip").empty().html(data.msg);
                    }
                },
                error: function (data) {
                    $("#tip").empty().html(data.msg);
                }
            });
        });
    });

    /**
     * 清空搜索框
     */

    $(function () {
        $("#query").change(function () {
            var hasValue = $("#query").val();
            hasValue = $.trim(hasValue);
            if (hasValue == null || hasValue == "") {
                window.location.href = "${pageContext.request.contextPath}/user/listUser.do";
            }
        });
    });

    //重置密码。

    function isClick() {
        var username = $("#username").val();
        var data = {"username": username};
        $.ajax({
            data: data,
            url: "${pageContext.request.contextPath}/user/hasRoles",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                //当目标对象是system和admin
                if (data.code == 0) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/checkRoles",
                        contentType: "application/json",
                        success: function (data) {
                            if (data.code == 1) {
                                if (confirm("确定重置密码吗？")) {
                                    $("#password").val("123456");
                                    $("#re_tip").html("已重置");
                                    return true;
                                }
                                return false;
                            } else {
                                alert(data.msg);
                            }
                        },
                        error: function () {
                            alert("重置失败");
                        }
                    });
                }
                if (data.code == 1) {
                    if (confirm("确定重置密码吗？")) {
                        $("#password").val("123456");
                        $("#re_tip").html("已重置");
                        return true;
                    }
                    return false;
                }
            },
            error:function () {
                alert("未知错误！");
            }
        });
    }


</script>

</body>
</html>
